<template>
	<div id="page">
		<van-nav-bar class="navTop" :title="$t('header.Grade_descrlption')" left-arrow=""  @click-left="navLeft" ></van-nav-bar>
		<img class="page-bg" src="../../assets/app-bg.jpg" >
		<div class="main">
			<div class="tab-main">
				<div class="box" v-for="(item , i) in lvData" >
					<div class="img-bor">
						<img class="icon" :src="require('../../assets/icon/vip'+i+'.png')" >
					</div>
					<div class="LV">{{item.name}}</div>
					<div class="lay">
						<div class="f-l">{{item.zt_num}} <span class="label">{{$t('page.Direct_push')}}</span></div>
						<div class="col">{{item.team_num}} <span  class="label">{{$t('page.Team')}} </span></div>
						<div class="f-r">{{item.team_balance}}<span class="label">{{$t('page.Team_funds')}}</span></div>
					</div>
					<div class="bottom">
						{{$t('page.Agent_sharing')}}<span class="f-r">{{item.rate}}%</span>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from "vuex";
	export default {
		name:"Grade",
		data() {
			return {
				tab_i:1,
				lvData:[
					{
						img:require('../../assets/icon/vip0.png'),
						name:'V0',rate: '1%',
						zt_num:'0', team_num:'1', team_balance:'200'
					}
					
					
				]
				
			}
		},
		mounted() {
			this.lv_Data()
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		watch: {
			'user': function(e) {
				this.userData = e
				this.lv_Data()
			}
		},
		methods: {
			navLeft(){
				 this.$router.go(-1);//返回上一层
			},
			tab(e){
				var tab = this.tab_i;
				if( tab != e){
					this.tab_i = e;
				}
			},
			async lv_Data(){
				if(this.$dapp.getAddress()){
					const { err, res } = await this.$request.get("/chss/dlLevel/dl_levels", {
						address:this.$dapp.getAddress()
					});
					if (err === null) {
						console.log(res)
						this.lvData = res;
						this.$forceUpdate();
					}
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{overflow: scroll;}
	
	.f-r{float: right;}
	
	.tab{
		display: flex; position: relative;
		.li{flex: 1; text-align: center; line-height: 80px; color: #3d558c; }
		
		.line{height: 4px; width: 250px; 
			position: absolute;
			bottom: 0px; left: 25%; margin-left: -125px;
			background:#188AFF;
			background: -moz-linear-gradient(to right,#1368f8 , #5ef2ff);
			background:  -webkit-linear-gradient(to right,#1368f8 , #5ef2ff);
			background: -o-linear-gradient(to right,#1368f8 , #5ef2ff);
			background: -ms-linear-gradient(to right,#1368f8 , #5ef2ff);
			background:  linear-gradient(to right,#1368f8 , #5ef2ff);
			
			transition: all 0.3s;
			-webkit-transition: all 0.3s; /* Safari 和 Chrome */
			-ms-transition: all 0.3s; 	/* IE 9 */
			-moz-transition: all 0.3s; 	/* Firefox */
			-o-transition: all 0.3s;	/* Opera */
			
		}
		& .li:nth-child(1){
			color: #fff;
		}
		
		&.tab2{
			.line{left: 75%;}
		}
		&.tab2 .li:nth-child(2){
			color: #fff;
		}
		&.tab2 .li:nth-child(1){
			color: #3d558c;
		}
		
	}
	
	.tab-main{padding: 30px;}
	
	.td{
		height: 100px; line-height: 100px; color:#CCC;
		display: flex; justify-content: space-between;
		color: #ccc;
		background:rgba(31, 39, 59, 0.8);
		border: 2px solid #364a7d; border-radius: 10px;
		margin: 20px 0px; padding:0px 30px;
		.icon{height: 40px; margin: 30px 0px;}
		
		
		&.th{border: none; border-bottom: 2px solid #272f44; margin-bottom: 30px;}
	}
	
	.box{
		border: 2px solid #2e3c60; border-radius:10px;
		position: relative; margin: 100px 0;
		color:#CCC; background:rgba(31, 39, 59, 0.8);
		
		.img-bor{
			height: 120px; width: 120px; box-sizing: border-box; padding: 20px;
			border-radius: 50%; box-shadow: 0 0 5px 0px #111;
			position: absolute; left: 50%; top:-60px; margin-left:-60px;
			border: 2px solid #2e3c60; background-color: #20283d;
			.icon{
				width: 100%; height:100%
			 }
		}
		 .LV{padding-top: 60px; line-height: 80px; text-align: center; }
		
		.lay{
			text-align: center; overflow: hidden;
			position: relative;
			margin: 10px 0px; padding: 0px 20px; line-height: 50px;
			
			.col{
				position: absolute; top: 0px; left: 0px; width: 100%;
				text-align: center;
				
			}
			.f-l{float: left;}
			.f-r{float: right;}
			.label{display: block; color:#5d72a9; font-size: 20px; }
		}
		
		.bottom{
			border-radius:0px 0px 10px 10px;
			
			background-color: #1256d5;
			height: 70px; line-height: 70px;
			padding: 0px 20px;
		}
		
	}
	
	
</style>
